{% extends "base.html" %}
{% block title %}幼儿管理{% endblock %}
{% block head %}
    {{ super() }}
	
<script>
var vm
class_select=''
function initVM(data) {
    vm = new Vue({
        el: '#div-kids',
        data: {
            kids: data.kids,
			k_classes:data.k_classes,
			i_classes:data.i_classes,
			class_select:'',
			i_class_select:'',
			name:'',
			i_class_name:'',
			i_class:'',
             },
        methods: {
		    reload:function(){	
			    x=document.getElementById("i_class_select")
				index=x.selectedIndex
				this.i_class_name=x.options[index].text
				getJSON('/api/i_class_kids', {
					i_class_select:this.i_class_select,
					name:this.name,
				}, function (err, results) {
					if (err) {
						return fatal(err);
					}
					for(i in results.kids){
			    
						kis_birthday=results.kids[i].id_number.slice(6,10)
						var d = new Date()
						thisyesr=d.getFullYear()			
						results.kids[i].age=thisyesr-kis_birthday		
		
			        }
					vm.kids=results.kids;
					vm.i_class=results.i_class;
				});
		    },
			save:function(){
			    if (! this.i_class_select.trim()) {
                    return alert('请选择兴趣班');
					}
				if(!confirm('确定此次'+this.i_class_name+'的学生调整？')){
				       return;
				   } 	
			    var i_kids=new Array(); 
			    for (i in vm.kids){
				    if (vm.kids[i].is_i_class==1){
					    i_kids.push(vm.kids[i].id)  
					}
				};
				getJSON('/api/i_class_kids/add', {
					i_kids: i_kids,
					i_class_select:this.i_class_select,
				}, function (err, results) {
					if (err) {
						return fatal(err);
					}
					refresh();
				});
		    },
	
        },
    });
}
$(function() {
	getJSON('/api/i_class_kids', {
		i_class_select:i_class_select,
		name:''
	}, function (err, results) {
			if (err) {
				return fatal(err);
			}
			for(i in results.kids){
			    
			kis_birthday=results.kids[i].id_number.slice(6,10)
			var d = new Date()
			thisyesr=d.getFullYear()
			
			results.kids[i].age=thisyesr-kis_birthday
			
			}
			initVM(results);
            for (i in vm.kids){
			    if (vm.kids[i].k_class==''){vm.kids[i].k_class='999'}			
			}			
			x=document.getElementById("class_select");
			classes=results.k_classes
			for(var i=0;i<classes.length;i++){
				v = classes[i].id; //value
				name = classes[i].name;
				opt = new Option(name,v); 
				x.options.add(opt);
				}
			x=document.getElementById("i_class_select");
			classes=results.i_classes
			for(var i=0;i<classes.length;i++){
				v = classes[i].id; //value
				name = classes[i].name;
				opt = new Option(name,v); 
				x.options.add(opt);
				}			
	});
	});
      
</script>

{% endblock %}

{%block panel%}
<div class="tm-panel  uk-panel uk-panel-box  ">                        
	<div class="uk-panel-title">兴趣班管理</div>
	<div class="uk-panel-li"><a href="/i_class_kids/add">人员调整</a></div> 
	<div class="line"></div>
	<div class="uk-panel-li"><a href="/i_class_kid_add">中途插班</a></div> 
	<div class="line"></div>
	<div class="uk-panel-li"><a href="/i_class">班级人员信息</a></div>
	<div class="line"></div>
	<div class="uk-panel-li"><a href="/i_tuition">兴趣班学费</a></div>
</div>
{%endblock%}
					
{% block content %}
<div class="tit"><a href="/">主页 </a>  》 <a href="/">幼儿管理 </a></div>
				


<div id="div-kids" class="div-pagemain uk-grid  uk-grid-divider" >

<div class="uk-width-1-2">

<form  class="uk-form uk-form-stacked ">


	<div class="uk-grid">
		<div class="uk-width-1-3">
			<div class="uk-form-row ">
			<label class="uk-form-label">班级名称:</label>
			<div class="uk-form-controls  uk-form-controls-text">
				
				<select v-model="class_select" id="class_select" >
					<option value=""></option>
					<option value="999">未分配</option>
				</select>
			</div>
			</div>
		</div>	

		<div class="uk-width-1-3">
			<div class="uk-form-row ">
			<label class="uk-form-label">姓名:</label>
			<div class="uk-form-controls ">
				<input v-model="name" v-on="change:reload()" type="text"  placeholder="名字" class="">
			</div>
			</div>
		</div>
	</div>
</form>

<div class="divmain-title">未加入{{'{{'}}i_class_name{{'}}'}}的小朋友</div>	

	<div class="uk-scrollable-box" style="height:300px; width:250px;">

        <div v-repeat="kid: kids | filterBy '0' in 'is_i_class' | filterBy class_select in 'k_class' | filterBy name in 'name'">
		    <div  class="i_class_kids uk-visible-hover-inline" v-on="click:kid.is_i_class = 1">{{'{{'}}kid.name{{'}}'}}&nbsp;&nbsp;&nbsp&nbsp;{{'{{'}}kid.sex{{'}}'}}&nbsp;&nbsp;&nbsp&nbsp;{{'{{'}}kid.age{{'}}'}}岁<div class="uk-hidden">-点击加入!</div></div>
        </div>
    </div>	

</div>	
     
	<div class="uk-width-1-2 ">

	<form  class="uk-form uk-form-stacked ">	
	<div class="uk-grid">
		<div class="uk-form-row ">
			<label class="uk-form-label">兴趣班名称:</label>
			<div class="uk-form-controls  uk-form-controls-text">
				<select v-model="i_class_select" id="i_class_select"  v-on="change:reload()">
					<option value=""></option>			
				</select>
			</div>
		</div>
	</div>	        
</form>		

<div class="divmain-title">已在{{'{{'}}i_class_name{{'}}'}}的小朋友</div>			
<div class="uk-scrollable-box"style="height:300px; width:250px;">

        <div v-repeat="kid: kids | filterBy '1' in 'is_i_class'">
		
		<div  class="i_class_kids" v-on="click:kid.is_i_class = 0">{{'{{'}}kid.name{{'}}'}}&nbsp;&nbsp;&nbsp&nbsp;{{'{{'}}kid.sex{{'}}'}}&nbsp;&nbsp;&nbsp&nbsp;{{'{{'}}kid.age{{'}}'}}岁    </div>
		
		</div>
        

</div>		
</div>	

     <div class="divbutton" style="margin-top:20px">
        <button type="submit" class="uk-button uk-button-primary" v-on="click: save()">保存</button>
    </div>
				
				
	
{%endblock%}
             